<template>

    <div class="part-one part-two">
      <div class="head">
        <div class="topZi ">
          <div class="date font1">{{ time }}</div>
          <div class="title font1">四川省网上群众工作平台月报</div>
          <div class="department">川网传媒·麻辣社区 | 群众呼声 - 四川省网上群众工作平台</div>
        </div>
      </div>
      <div class="mybody">
        <div class="top-img-box">
          <img src="../../assets/image/mybody-top.png">
        </div>
        <div class="main">
          <div class="title font1">
            群众呼声
            <span class="desc font1">·哪些领域留言最多？</span>
          </div>
          <div class="echarts-box2" :id="`tubiao2_${id}`"></div>
        </div>
      </div>
      <div class="footer">
        <div class="background-img-box">
          <img src="../../assets/image/footer-background.png" alt="麻辣社区">
        </div>
        <div class="logo-box">
          <img src="../../assets/image/footer-LOGO.png" alt="麻辣社区">
        </div>
      </div>
    </div>

</template>
<script>

import * as echarts from 'echarts';

export default {
  name: 'Lingyu',
  data() {
    return {
      chart: '',
      imgUrl: ''
    }
  },
  props: ['lingyuData','time','id'],
  methods: {
    cinit() {
      let _this = this
      let colorList = [
        {
          colorStart: '#488BFF',
          colorEnd: '#9abffd'
        },
        {
          colorStart: '#8bf2f1',
          colorEnd: '#7de1e1'
        },
        {
          colorStart: '#f3ba8d',
          colorEnd: '#ed7c40'
        },
        {
          colorStart: '#f7d58d',
          colorEnd: '#f8d48a'
        },
        {
          colorStart: '#99a9fa',
          colorEnd: '#91a1f7'
        },
        {
          colorStart: '#68d597',
          colorEnd: '#92f0d8'
        },
        {
          colorStart: '#526cf5',
          colorEnd: '#8391f4'
        }
      ]
      let Data = []
      Data = this.lingyuData;
      let PieData = JSON.parse(JSON.stringify(Data));
      let options = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

        series: [

          {
            left: '0%',
            name: '领域：',
            type: 'pie',
            animation: false,
            hoverAnimation:false,
            radius: '70%',
            labelLine: {
              length: 30,
              length2: '150'
            },
            itemStyle: {
              normal: {
                borderColor: '#FFFFFF', borderWidth: 2,
                color: (list) => {
                  colorList
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      offset: 0,
                      color: colorList[list.dataIndex]['colorStart']
                    },
                    {
                      offset: 1,
                      color: colorList[list.dataIndex]['colorEnd']
                    }
                  ])
                }
              }
            },
            label: {
              padding: [-50, -120, 5, -160],
              textStyle: {
                fontFamily: 'TextBlack'
              },
              // lineHeight:0,
              formatter: function(params) {
                // 将标签文字按照适当的位置进行换行
                var newParamsName = ''
                var paramsNameNumber = params.name.length
                var provideNumber = 6  // 每行能显示的字的个数
                // 根据每行能显示的字数，计算出标签文字需要换行的次数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                // 如果换行，则每行显示的文字数需要根据字数进行调整
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = ''
                    var start = p * provideNumber
                    var end = start + provideNumber
                    // 每行最后一次不换行
                    if (p === rowNumber - 1) {
                      tempStr = params.name.substring(start, paramsNameNumber)
                    } else {
                      tempStr = params.name.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr
                  }
                } else {
                  newParamsName = params.name
                }
                // 返回的格式，根据具体的业务需求确定
                return newParamsName
              }

            },
            labelLayout: {
              verticalAlign: 'bottom'
            },
            data: PieData.map((item, index) => {
              item.label = {
                color: colorList[index].colorStart,
                fontSize: '24',
                fontWeight: 'bolder'
              }
              item.name = item.name +' '+item.value +'%'
              return item
            })

          }
        ]
      }
      this.$nextTick(() => {

          let chart = echarts.init(document.getElementById('tubiao2_'+this.id),null, {devicePixelRatio: 2})
          chart.setOption(options)

      })
    }
  },
  mounted() {
    // this.init()
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/fonts.css';
@import '../../assets/yuebao/css.css';
@import '../../assets/yuebao/media.css';

</style>
